<template>
  <basic-drawer showFooter v-bind="$attrs" title="支付通道配置" width="70%" :visible="visible" :maskClosable="false" @close="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-list style="margin-left: 20px" :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5 }" :data-source="appConfigs">
        <template #renderItem="{ item }">
          <a-card hoverable style="width: 200px; margin-bottom: 50px" @click="setting(item)">
            <template #cover>
              <a-image :preview="false" :src="urlPrefix + String(item?.img)" :fallback="fallbackImg" />
            </template>
            <a-card-meta :title="item.channelName">
              <template #description>
                <template v-if="item.state === 'normal'">
                  <a-badge dot color="green" />
                  <span style="color: green">已启用</span>
                </template>
                <template v-else-if="item.state === 'banned'">
                  <a-badge dot color="red" />
                  <span style="color: red">封禁</span>
                </template>
                <template v-else-if="item.state === 'forbidden'">
                  <a-badge dot color="red" />
                  <span style="color: red">停用</span>
                </template>
                <template v-else>
                  <a-badge dot color="grey" />
                  <span style="color: grey">未配置</span>
                </template>
              </template>
            </a-card-meta>
          </a-card>
        </template>
      </a-list>
    </a-spin>
    <mch-app-pay-config-edit ref="mchAppPayConfigEdit" @ok="initData" />
    <template #footer>
      <a-button key="cancel" @click="handleCancel">关闭</a-button>
    </template>
  </basic-drawer>
</template>

<script setup lang="ts">
  import { BasicDrawer } from '/@/components/Drawer'
  import { $ref } from 'vue/macros'
  import { findAllConfig, MchApplication, MchAppPayConfigResult } from '../MchApplication.api'
  import { getFilePreviewUrlPrefix } from '/@/api/common/FileUpload'
  import MchAppPayConfigEdit from './MchAppPayConfigEdit.vue'

  let confirmLoading = $ref(false)
  let visible = $ref(false)
  let mchApp = $ref<MchApplication>()
  let appConfigs = $ref<MchAppPayConfigResult[]>([])
  let urlPrefix = $ref<string>()

  const mchAppPayConfigEdit = $ref<any>()

  // 默认图片的base64值
  const fallbackImg =
    ''
  /**
   * 初始化并展示
   */
  function show(mchApplication) {
    visible = true
    mchApp = mchApplication
    initData()
  }

  /**
   * 初始化数据
   */
  async function initData() {
    confirmLoading = true
    const configResults = await findAllConfig(mchApp?.code)
    appConfigs = configResults.data
    const urlPrefixResult = await getFilePreviewUrlPrefix()
    urlPrefix = urlPrefixResult.data
    confirmLoading = false
  }

  /**
   * 关闭
   */
  function handleCancel() {
    visible = false
  }

  /**
   * 打开支付设置界面
   */
  function setting(record: MchAppPayConfigResult) {
    record.mchCode = mchApp?.mchCode as string
    record.mchAppCode = mchApp?.code as string
    mchAppPayConfigEdit.show(record)
  }

  defineExpose({ show })
</script>

<style scoped lang="less"></style>
